<template>
	<view class="main-content">
		<image :src="bg_cover" mode="widthFix" class="bg-cover"></image>
		<view class="money-display-area">
			<text class="money">
				{{money}}
				<image :src="getCloudResourceSite('love/money-icon.png')" mode="widthFix" class="money-identification"></image>
			</text>
			<br>
			<image :src="getCloudResourceSite('love/hint-icon.png')" mode="widthFix" class="hint-identification"></image>
		</view>
		<view class="content-display-area">
			<view class="tabs row bg-white">
				<view class="item bg-white" v-bind:class="{'this':key == 0}" @click="key = 0">爱心平台</view>
				<view class="item bg-white" v-bind:class="{'this':key == 1}" @click="key = 1">爱心小分队</view>
			</view>
			<view class="content content-one bg-white" v-if="key == 0">
				<u-waterfall v-model="articleLists" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="item mt20 mr20" v-for="(item, index) in leftList" :key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<image :src="item.cover_image" mode="widthFix" class="cover"></image>
							<view class="title line2 bold ">
								{{item.title}}
							</view>
							<image :src="getCloudResourceSite('love/more.png')" mode="widthFix" class="more"></image>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="item mt20" v-for="(item, index) in rightList" :key="index">
							<image :src="item.cover_image" mode="widthFix" class="cover"></image>
							<view class="title line2 bold">
								{{item.title}}
							</view>
							<image :src="getCloudResourceSite('love/more.png')" mode="widthFix" class="more"></image>
						</view>
					</template>
				</u-waterfall>
			</view>
			<view class="content content-tow bg-white" v-if="key == 1">
				<view class="item mb20" v-for="(item, index) in videoLists" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<image :src="item.cover_image" mode="widthFix" class="cover"></image>
					<view class="title line2 bold ">
						{{item.title}}
					</view>
					<image :src="getCloudResourceSite('love/more.png')" mode="widthFix" class="more"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLoveConfig,
		getLoveArticleList,
		getLoveVideoList,
	} from '@/api/app';
	export default {
		data() {
			return {
				bg_cover:'',
				money:'0.00',
				key:0,
				articlePage: 0,
				articleStatus: 0,
				articleLists: [],
				videoPage: 0,
				videoStatus: 0,
				videoLists:[]
			};
		},
		onLoad() {
			getLoveConfig().then(res => {
				if(res.code == 1){
					this.bg_cover = res.data.bg_cover;
					this.money = res.data.money;
				}
			})
			this.getLoveArticleListFun();
			this.getLoveVideoListFun();
		},
		onReachBottom() {
			if(this.key == 0){
				this.articlePage += 1;
				this.getLoveArticleListFun();
			}
			
			if(this.key == 1){
				this.videoPage += 1;
				this.getLoveVideoListFun();
			}
		},
		methods: {
			getLoveArticleListFun(){
				if(this.articleStatus == 0){
					getLoveArticleList({
						page:this.articlePage
					}).then(res => {
						if(res.code == 1){
							for(var key in res.data.lists){
								this.articleLists.push(res.data.lists[key]);
							}
							
							if(res.data.more == 0){
								this.articleStatus = -1;
							}
						}
					})
				}
			},
			getLoveVideoListFun(){
				if(this.videoStatus == 0){
					getLoveVideoList({
						page:this.videoPage
					}).then(res => {
						if(res.code == 1){
							for(var key in res.data.lists){
								this.videoLists.push(res.data.lists[key]);
							}
							
							if(res.data.more == 0){
								this.videoStatus = -1;
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.bg-cover{
		width: 100%;
	}
	.money-display-area{
		top: 0;
		right: 0;
		text-align: right;
		position: absolute;
		padding: 20px 10px 40px 30px;
		background: url($u-resource-imgaes-url + 'love/money-bg.png')  no-repeat;
		background-size:100% 100%;

		.money{
			font-size: 40px;
			font-weight: bold;
			color: #FFFFFF;
			-webkit-text-stroke: 1px #FF6161;
			
			.money-identification{
				width: 20px;
			}
		}
		.hint-identification{
			width: 170px;
		}
	}
	
	.content-display-area{
		width: 90%;
		border-radius: 10px;
		overflow: hidden;
		margin: 0 auto;
		
		.tabs{
			bottom: -5px;
			height: 44px;
			margin-top: 20px;
			line-height: 44px;
			position: relative;
			display: inline-block;
			border-radius: 10px 50px 0 0;
			box-shadow: 0px 0px 11px 1px #e3e3e3;
			
			.item{
				border-radius: 10px 50px 0 0;
				padding: 0 35px;
				display: inline-block;
				color: #B3B3B3;
				font-weight: bold;
			}
			
			.this{
				border-radius: 10px 50px 0 0;
				background: linear-gradient(90deg , #20E6DF 0%, #00C9DB 100%);
				color: #000000;
				height: 48px;
				line-height: 48px;
				position: relative;
				top: -4px;
			}
		}
		
		.content{
			padding: 10px;
			border-radius: 10px;
			overflow: hidden;
			position: relative;
		}
		.content-one{
			
			.item{
				background-color: #F5F5F5;
				border-radius: 5px;
				.cover{
					border-radius: 5px;
					width: 100%;
					height: 106px !important;
				}
				.title{
					height: 40px;
					color: #333333;
					padding: 5px;
				}
				.more{
					width: 50px;
					margin: 5px;
					float: right;
				}
			}
		}
		
		.content-tow{
			
			.item{
				border-radius: 5px;
				position: relative;
				background-color: #F5F5F5;
				
				.cover{
					border-radius: 5px;
					width: 100%;
					height: 156px !important;
				}
				.title{
					height: 40px;
					color: #333333;
					padding: 5px;
					padding-bottom: 15px;
				}
				.more{
					width: 50px;
					margin: 5px;
					float: right;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}
	}
	
</style>
